<template>
    <div>
      <van-nav-bar
  title="欢迎注册"
  left-text="返回"
  right-text="登录"
  left-arrow
  @click-left="$router.push('/')"
  @click-right="$router.push('/login')"
/>
   <div class="box">
       <h1>注册成功即可登录</h1>
       <van-form ref="form">
  <van-field
    v-model="username"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
 <van-field
    v-model="email"
    type="email"
    label="邮箱"
    placeholder="邮箱"
    :rules="[{ required:true, message: '请填写邮箱' }]"
  />
<van-field
    v-model="phone"
    type="text"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写合法手机号' ,pattern:/^1[3-9]\d{9}$/,trigger:'blur'}]"
  />


  <div style="margin: 40px 20px;">
      <van-radio-group v-model="radio" style="margin-bottom:10vw;">
  <van-radio name="1">我已阅读并同意
      <a href="javascript;">《用户协议》</a>
  </van-radio>
     </van-radio-group>
    <van-button round block type="info" @click="pegister">快速注册</van-button>
  </div>
  </van-form>
   </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
    export default {
        data() {
            return {
               radio:'',
               email:'',
               phone:'',
               username: '',
               password: '',
            }
        },
        methods: {
          pegister() {   
                let params = `username=${this.username}&password=${this.password}&phone=${this.phone}&email=${this.email}`;
            let url = '/user/register'
            this.axios.post(url,params).then((res) => {
              console.log(res)
              if(res.data.code == 500){
                  Dialog({ message: '该用户名已被注册' });
              }else if(res.data.code == 200){
                   Dialog({ message: '注册成功' });
                   this.$router.push('/login')
              }
            })
          },
         
        },
    }
</script>

<style lang="scss" scoped>
.box{
     h1{
         text-align: center;
         margin-bottom: 10vw;
     }
     margin-top: 20vw;
 }
</style>